<template>
    <div class="cont">
        <!-- 日期 -->
        <div class="container">
            <span class="flex-item">创建时间</span>
        </div>
        <div class="flex-item time">
            <a-space direction="vertical" :size="12">
            <a-range-picker v-model:value="value4" :format="dateFormat" />
            </a-space>
        </div>
        <!-- 接诊 -->
        <div class="container">
            <span class="flex-item">创建时间</span>
        </div>
        <div class="flex-item deo">
            <a-input-group compact>
                <a-select v-model:value="value9">
                    <a-select-option value="Option1-1">未接珍</a-select-option>
                    <a-select-option value="Option1-2">接珍中</a-select-option>
                    <a-select-option value="Option1-3">接珍状态</a-select-option>
                </a-select>
            </a-input-group>
        </div>
        <!-- 搜索 -->
        <div class="flex-item chan">
            <a-input-search
            v-model:value="value"
            placeholder="请写搜索内容"
            style="width: 200px;"
            @search="onSearch"
            />
        </div>
    </div>
  </template>
  <script lang="ts">
  import dayjs, { Dayjs } from 'dayjs';
  import { defineComponent, ref,onMounted } from 'vue';
  import { CopyOutlined } from '@ant-design/icons-vue';
  export default defineComponent({
    components: {
    CopyOutlined,
  },
    setup(props,ctx) {
        //日期
      const dateFormat = 'YYYY/MM/DD';
      const weekFormat = 'MM/DD';
      const customWeekStartEndFormat = (value: string | number | dayjs.Dayjs | Date | null | undefined) =>
      `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
        .endOf('week')
        .format(weekFormat)}`;
        //接诊
        const value9 = ref<string>('Option1-3');
        //搜索
        const value = ref<string>('');
        const onSearch = (searchValue: string) => {
       /* console.log('use value', searchValue);
       console.log('or use this.value', value.value); */
      ctx.emit('searchfun',searchValue)
        };
        
        
        return {
        value,
        onSearch,
        value9,
        value4: ref<[Dayjs, Dayjs]>([
        dayjs('2019/11/05', dateFormat),
        dayjs('2019/11/05', dateFormat),
      ]),
        dateFormat,customWeekStartEndFormat,
        customFormat: (value: { format: (arg0: string) => any; }) => `custom format: ${value.format(dateFormat)}`,
      };
    },
  });
  </script>

<style scoped>
.cont{
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-left: 10px;
}
.container{
    font-family:"微软雅黑";
    font-size: 14px;

}
.flex-item{
    margin-right: 10px;
    margin-top: -5px;
}
.deo{
    width: 100px;
}
.chan{
    width: 251px;
}
.time{
    width: 220px;
}

</style>